<!--
 * @Author: ChunLai
 * @Date: 2023-04-01 13:42:00
 * @LastEditTime: 2025-02-07 16:13:50
 * @Description: 全国级推广
 * @FilePath: \01.latest-short-insure\src\views\multipages\salesman.vue
-->
<template>
  <div class="sales-men-page">
    <div class="md1 just-spa">
      <div class="md1-l">
        <p class="lineh2">请确认<i>省份</i></p>
        <div class="prolist">
          <span
            :class="item.provinceNo == selectProvince ? 'active' : ''"
            @click="changeSaleProvince(item)"
            v-for="(item, index) in saleMenListArea"
            :key="`clerk${index}`"
          >
            {{ item.provinceName | fmtProvinceName }}
          </span>
        </div>
      </div>
      <div class="md1-r">
        <span class="clerk_icon"></span>
      </div>
    </div>
    <!-- 卡片 -->
    <div class="clerk_lists" v-if="clerkList.length > 0">
      <ClerkInfoCard
        :itemObj="item"
        v-for="(item, index) in clerkList"
        :key="`clerk-card-${index}`"
      />
    </div>
    <div class="empty-box" v-else>
      <div class="empty-img">
        <img :src="`${imgUrlPath}/icons/empty.png`" alt="" />
      </div>
      <p class="empty_tip">未配置出单员</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ClerkInfoCard from "./components/ClerkInfoCard";

export default {
  name: "salesman",
  data() {
    return {
      selectProvince: "",
      clerkList: [],
    };
  },
  components: { ClerkInfoCard },
  computed: {
    ...mapGetters({
      saleMenListArea: "agent/promotionProvinceList",
    }),
  },
  filters: {
    fmtProvinceName(val) {
      return val.replace("自治区", "");
    },
  },
  created() {
    // 初始赋值
    if (this.saleMenListArea.length > 0) {
      this.selectProvince = this.saleMenListArea[0].provinceNo;
      this.getBillersList();
    }
  },
  mounted() {},
  methods: {
    changeSaleProvince(item) {
      this.selectProvince = item.provinceNo;
      this.getBillersList();
    },
    getBillersList() {
      let parmars = {
        workNum: this.workNum,
        productCode: this.mainRiskCode,
        provinceNo: this.selectProvince,
      };
      this.$http
        .post(`ms-insure/mobile/common/getIssuedPerson`, {
          data: JSON.stringify(parmars),
        })
        .then(({ data }) => {
          if (data.code == "1") {
            this.clerkList = data.list;
          } else {
            this.$baseAlert(data.msg);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.just-spa {
  display: flex;
  justify-content: space-between;
}

.sales-men-page {
  width: 100%;
  min-height: 100vh;
  padding: 18px;
  background: linear-gradient(180deg, #ffeaea 0%, #f4f9f5 300px, #f5f5f9 100%);
}

.md1-l {
  width: calc(100% - 90px);
}

.md1-r {
  width: 85px;
  padding-right: 10px;
}

.lineh2 {
  font-size: 18px;
  font-weight: bold;
  color: #1b1b1b;
  margin-top: 8px;

  i {
    color: #da251d;
    font-style: normal;
  }
}

.prolist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 14px;

  span {
    min-width: 65px;
    height: 25px;
    line-height: 25px;
    color: #666666;
    font-weight: 500;
    font-size: 15px;
    padding: 0 10px;
    background: #fff;
    border-radius: 12px;
    margin-right: 7px;
    margin-bottom: 5px;

    &.active {
      color: #ffffff;
      background: #ff452c;
    }
  }
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;

  .empty-img {
    width: 130px;
  }

  .empty_tip {
    color: #666666;
    margin-top: 20px;
  }
}

.clerk_lists {
  position: relative;
  z-index: 2;
  margin-top: -4px;
}

.clerk_icon {
  display: inline-block;
  width: 75px;
  height: 88px;
  background: url("//wxou.mschn.cn/app_h5/insurepics/icons/chudan2.png") no-repeat;
  background-size: 100% 100%;
}
</style>
